/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Form,Grid } from '@alifd/next';

const { Row, Col } = Grid;
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: { xxs: 6, s: 3, l: 4 },
  wrapperCol: { s: 12, l: 12 }
};

export default class OpcEditForm extends Component {
  static displayName = 'OpcEditForm';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    let jsonConfig = this.props.jsonConfig;
    let jsonObject = {};
    try {
      jsonObject = JSON.parse(jsonConfig)
    } catch(e) {
    }
    this.state = {
      value: {...jsonObject},
    };
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  }

  validateAllFormField = (values, errors) => {
    let that = this;
    if (!errors) {
      for (let k in values) {
        if(values[k] === '') delete values[k]
      }
      this.props.confirm(values)
    } else {
      // 处理表单报错
    }
  }

  render() {
    return (
      <Form
        value={this.state.value}
        onChange={this.formChange}
        ref="socketConfigEditForm"
      >
        <div style={{ padding: '20px' }}>
          <FormItem size="small" label="主机地址：" {...formItemLayout} required maxLength={30} requiredMessage="必填">
            <Input name="host" placeholder="主机地址" />
          </FormItem>
          <FormItem size="small" label="域：" {...formItemLayout}>
            <Input name="domain" placeholder="域" />
          </FormItem>
          <FormItem size="small" label="用户名：" {...formItemLayout}>
            <Input name="user" placeholder="用户名" />
          </FormItem>
          <FormItem size="small" label="密码：" {...formItemLayout}>
            <Input name="password" placeholder="密码" />
          </FormItem>
          <FormItem size="small" label="progid：" {...formItemLayout}>
            <Input name="progid" placeholder="progid" />
          </FormItem>
          <FormItem size="small" label="clsid：" {...formItemLayout}>
            <Input name="clsid" placeholder="clsid" />
          </FormItem>
          <Row style={{ marginTop: 20 }}>
            <Col offset="3">
              <Form.Submit
                size="medium"
                type="primary"
                style={{ width: 100 }}
                validate
                onClick={this.validateAllFormField}
              >
                  确  定
              </Form.Submit>
            </Col>
          </Row>
        </div>
      </Form>
    );
  }
}

const styles = {
  label: {
    textAlign: 'right',
  },
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    alignItems: 'center',
    marginBottom: 25,
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
};

